import React from 'react';
import { useState } from 'react';
import { Link } from 'umi';

import ProCard from '@ant-design/pro-card';

import { Input, Space, Select, Card, ConfigProvider } from 'antd';

const { Search } = Input;

const onSearch = (value) => {
  console.log(value);
};

const searchOptions1 = [
  {
    name: '2022',
    value: '2022',
  },
  {
    name: '2021',
    value: '2021',
  },
  {
    name: '2020',
    value: '2020',
  },
];

const pages = [
  {
    title: '异常节点识别',
    imgTitle: 'MultiQuery',
    content:
      '通过结合图卷积神经网络和专家规则，系统能够高效准确地识别异常节点。图卷积神经网络利用节点的邻居信息和图的拓扑结构来学习节点的表示，从而捕捉异常节点的特征。同时，系统还整合了专家规则，结合领域知识和经验，进一步提高异常节点识别的准确性和可解释性。',
    index: 1,
    url: '/MultiQuery',
    activity: true,
  },
  {
    title: '异常子图挖掘',
    imgTitle: 'EquityNetwork',
    content:
      '系统还支持异常子图的挖掘，以便发现更复杂和隐蔽的欺诈行为。通过利用知识大图的时序特征、语义特征以及拓扑特征，系统能够识别出具有相似特征和行为模式的节点和边的子图。这些异常子图可能涉及欺诈行为的协同作用或隐藏的异常交互模式，帮助深入理解和挖掘欺诈网络的运作机制。',
    index: 2,
    url: '/EquityNetwork',
    activity: false,
  },
  {
    title: '知识大图表示',
    imgTitle: 'VisualAnalysis',
    content: `系统建立在强大的知识大图数据结构之上。知识大图不仅包含了丰富的节点和边的信息，还具备时序特征、语义特征和拓扑特征。通过充分利用这些特征，系统能够挖掘出更为隐蔽和复杂的欺诈行为，从而提高欺诈检测的精度和准确性。`,
    index: 3,
    url: '/VisualAnalysis',
    activity: false,
  },
];

const searchOptions2 = [
  { name: '', value: '一档' },
  { name: '', value: '二档' },
  { name: '', value: '三档' },
];

// const searchOptions3 = [];

// const handleChange =()=>{

// }

export default function Zhongbang() {
  const [activeKey, setActiveKey] = useState(1);

  return (
    <div>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#722ED1',
          },
        }}
      >
        <ProCard
          gutter={8}
          style={{
            paddingBottom: '3em',
            marginBottom: '1em',
            borderRadius: '8px',
            height: '155px',
          }}
          layout="center"
          title={<b style={{ fontSize: '18px' }}>票据欺诈识别</b>}
        >
          <Select
            defaultValue="2022"
            style={{ width: 120, marginLeft: '200px' }}
            // onChange={handleChange}
            options={searchOptions1}
          />

          <Search
            placeholder="请输入要查询的企业名称"
            allowClear
            enterButton="查询"
            size="middle"
            onSearch={onSearch}
            style={{ marginRight: '200px' }}
          />
        </ProCard>

        <ProCard
          gutter={8}
          style={{
            paddingBottom: '3em',
            marginBottom: '1em',
            borderRadius: '8px',
            height: '300px',
          }}
          layout="center"
          title={<b style={{ fontSize: '18px' }}>关联方图谱</b>}
        >
          <div>
            <img src="/dynamicGraph.png" alt="" />
          </div>
        </ProCard>

        <ProCard>
          <h2 style={{ textAlign: 'center', fontSize: '26px', fontWeight: 'bold', padding: 0 }}>
            产品功能
          </h2>

          <img
            src="/icons/decoration.svg"
            style={{
              width: '60px',
              height: '8px',
              margin: '0 auto 10px auto',
              display: 'block',
            }}
          />

          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            {pages.map((page) =>
              activeKey === page.index ? (
                <ProCard
                  hoverable
                  bordered
                  colSpan={6}
                  layout="center"
                  direction="column"
                  style={{
                    position: 'relative',
                    zIndex: '1',
                    height: '400px',
                    padding: '19px',
                    transition: 'box-shadow 0.8s, border-color 0.8s',
                  }}
                >
                  <img src={`/icons/${page.imgTitle}1.svg`} style={{ marginBottom: '15px' }}></img>
                  <h3 style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '20px' }}>
                    {page.title}
                  </h3>
                  <p>{page.content}</p>
                  <Link to={page.url} target="_blank">
                    查看详情
                  </Link>
                </ProCard>
              ) : (
                <ProCard
                  hoverable
                  bordered
                  onMouseEnter={() => setActiveKey(page.index)}
                  colSpan={3.6}
                  layout="center"
                  direction="column"
                  style={{
                    height: '400px',
                    padding: '19px',
                  }}
                >
                  <img src={`/icons/${page.imgTitle}.svg`} style={{ marginBottom: '25px' }}></img>
                  <h3 style={{ textAlign: 'center', fontSize: '21px' }}>{page.title}</h3>
                </ProCard>
              ),
            )}
          </div>
        </ProCard>

        <ProCard
          style={{ marginTop: '25px', borderRadius: '16px', padding: '0' }}
          direction="column"
        >
          <h2 style={{ textAlign: 'center', fontSize: '26px', fontWeight: 'bold', padding: 0 }}>
            应用场景
          </h2>
          <img
            src="/icons/decoration.svg"
            style={{
              width: '60px',
              height: '8px',
              margin: '0 auto',
              display: 'block',
            }}
          />
          <div
            style={{
              // marginBottom: '-24px',
              padding: '0',
              display: 'flex',
              justifyContent: 'center',
              marginTop: '10px',
            }}
          >
            <div style={{ width: '200px' }}>
              <h3
                style={{
                  fontWeight: 'bolder',
                  width: '150px',
                  height: '50px',
                  margin: '0 auto',
                  lineHeight: '50px',
                  textAlign: 'center',
                  backgroundColor: 'rgb(249, 240, 255)',
                }}
              >
                票据欺诈识别
              </h3>
            </div>
            <img
              src="/Jiaohang0.png"
              alt=""
              style={{ display: 'block', border: '1px solid black' }}
            />
          </div>
        </ProCard>

        <ProCard
          style={{ marginTop: '25px', borderRadius: '16px', padding: '0' }}
          direction="column"
        >
          <h2 style={{ textAlign: 'center', fontSize: '26px', fontWeight: 'bold', padding: 0 }}>
            产品特色
          </h2>
          <img
            src="/icons/decoration.svg"
            style={{
              width: '60px',
              height: '8px',
              margin: '0 auto',
              display: 'block',
            }}
          />
          <div
            style={{
              // marginBottom: '-24px',
              padding: '0',
              display: 'flex',
              justifyContent: 'space-around',
              marginTop: '10px',
            }}
          >
            <ProCard style={{ width: '300px', height: '120px', border: '1px solid black' }}>
              <h3 style={{ textAlign: 'center', fontWeight: 'bold', color: '#722ED1' }}>
                知识大图
              </h3>
              <span style={{ fontWeight: 'bold' }}>丰富的拓扑特征、语义特征、时序特征</span>
            </ProCard>
            <ProCard style={{ width: '300px', height: '120px', border: '1px solid black' }}>
              <h3 style={{ textAlign: 'center', fontWeight: 'bold', color: '#722ED1' }}>
                规则+模型的解决方案
              </h3>
              <div style={{ fontWeight: 'bold', margin: '0 auto', textAlign: 'center' }}>
                提高准确性的同时兼顾可解释性
              </div>
            </ProCard>
            <ProCard style={{ width: '300px', height: '120px', border: '1px solid black' }}>
              <h3 style={{ textAlign: 'center', fontWeight: 'bold', color: '#722ED1' }}>
                节点+子图的视角
              </h3>
              <div style={{ fontWeight: 'bold', margin: '0 auto', textAlign: 'center' }}>
                充分发现欺诈异常行为
              </div>
            </ProCard>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            <img style={{ width: '300px', marginTop: '10px' }} src="/jiaohang.png" alt="" />
            <img style={{ width: '300px', marginTop: '10px' }} src="/jiaohang.png" alt="" />
            <img style={{ width: '300px', marginTop: '10px' }} src="/jiaohang.png" alt="" />
          </div>
        </ProCard>
      </ConfigProvider>
    </div>
  );
}
